<template>
  <div class="pb-12 min-h-screen" style="min-width: 1200px;width: 1200px;margin:auto">
    <!-- <router-link :to="{ path: '/' }">
      <div class="py-4 bg-white">
        <h2 class="text-xl pt-2 font-bold">江西省独角兽 | 瞪羚</h2>
        <h2 class="text-xl pt-2 font-bold">企业服务平台</h2>
      </div>
    </router-link> -->
    <div class="flex mt-8">
      <div class="menu-list">
        <div
          v-for="item in moduleList"
          :key="item.name"
          :class="[
            'headItem',
            item.name == keyPathName ? 'active-headItem' : ''
          ]"
          @click="transformModule(item.name)"
        >{{ item.textName }}</div>
      </div>
      <div class="flex-grow">
        <div class="flex justify-between py-2 mb-4 align-middle border-b">
          <span class="text-xl font-bold">{{ keyPathItem.textName }}</span>
          <div class="text-sm">
            当前位置:
            <router-link :to="{ path: '/' }" class="alink">首页</router-link>/
            <span>{{ keyPathItem.textName }}</span>
          </div>
        </div>
        <div>
          <div v-show="keyPathName == 'notice'">
            <div>
              <div
                v-for="item in noticeList"
                :key="item.annunciatePolicyId"
                class="flex justify-between py-3 border-b border-dashed cursor-pointer alink"
                @click="toNoticeDetail(item.annunciatePolicyId)"
              >
                <p class="flex-grow-2 max-w-3xl h-6 truncate">{{ item.title }}</p>
                <span class="not-italic text-gray-400 flex-grow-1 text-right">{{ item.publishTime }}</span>
              </div>
            </div>

            <pagination
              v-show="noticeTotal > 0"
              :total="noticeTotal"
              :page.sync="noticeQueryParams.pageNum"
              :limit.sync="noticeQueryParams.pageSize"
              @pagination="noticeGetList"
            />
          </div>
          <div v-show="keyPathName == 'policy'">
            <div>
              <div
                v-for="item in policyList"
                :key="item.annunciatePolicyId"
                class="flex justify-between py-3 border-b border-dashed cursor-pointer alink"
                @click="toPolicyDetail(item.annunciatePolicyId)"
              >
                <p class="flex-grow-2 max-w-3xl h-6 truncate">{{ item.title }}</p>
                <span
                  class="not-italic text-gray-400 flex-grow-1 min-w-8rem text-right"
                >{{ item.publishTime }}</span>
              </div>
            </div>

            <pagination
              v-show="policyTotal > 0"
              :total="policyTotal"
              :page.sync="policyQueryParams.pageNum"
              :limit.sync="policyQueryParams.pageSize"
              @pagination="policyGetList"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />-->
  </div>
</template>

<script>
import { getPolicyList } from "@/api/policy";
import { getNoticeList } from "@/api/notice";

export default {
  name: "policyDetail",

  data() {
    return {
      keyPathName: "",
      keyPathItem: "",

      noticeTotal: 0,
      noticeQueryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      noticeList: [
        // {
        //   annunciatePolicyId: "",
        //   title: "",
        //   publishTime: "",
        //   content: ""
        // }
      ],

      policyTotal: 0,
      policyQueryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      policyList: [
        // {
        //   annunciatePolicyId: "",
        //   title: "",
        //   publishTime: "",
        //   content: ""
        // }
      ],

      moduleList: [
        { name: "notice", textName: "通知公告" },
        { name: "policy", textName: "政策列表" },
      ],
    };
  },
  watch: {
    $route(to) {
      this.keyPathName = this.getKeyRoutePath(to);
    },
  },

  created() {
    // this.initId();
    // this.getList()
    this.noticeGetList();
    this.policyGetList();

    this.keyPathName = this.getKeyRoutePath(this.$route);
  },
  methods: {
    getKeyRoutePath(router) {
      let path = router.fullPath;
      if (path) {
        let lastIndex = path.lastIndexOf("/");
        let keyName = path.substring(lastIndex + 1, path.length);
        let resArr = this.moduleList.filter((item) => {
          return item.name == keyName;
        });
        let resItem = resArr[0];
        this.keyPathItem = resItem;
        return keyName;
      }
    },

    noticeGetList() {
      let query = this.noticeQueryParams;
      getNoticeList(query).then((res) => {
        this.noticeTotal = res.total;
        this.noticeList = res.rows;
      });
    },
    toNoticeDetail(id) {
      this.$router.push({ name: "noticeDetail", query: { id: id } });
    },

    policyGetList() {
      let query = this.policyQueryParams;
      getPolicyList(query).then((res) => {
        this.policyTotal = res.total;
        this.policyList = res.rows;
      });
    },
    toPolicyDetail(id) {
      this.$router.push({ name: "newspolicyDetail", query: { id: id } });
    },

    getList() {
      let query = this.queryParams;
      getPolicyList(query).then((res) => {
        this.tableTotal = res.total;
        this.policyList = res.rows;
      });
    },

    transformModule(name) {
      this.$router.replace({ name: name });
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-list {
  min-width: 200px;
  @apply pr-12;
  .headItem {
    @apply h-10 leading-10 text-center cursor-pointer;
  }
  .active-headItem {
    @apply h-10 leading-10 bg-blue-500 text-white text-center;
  }
}
</style>
